<template>
    <div>
        <course-base></course-base>
         <h1>课程内容</h1>
        <div class="course_info">
            <div v-if="!$route.query.CDid" class="info_cover"></div>
            <div class="course_left">
                <dir-com></dir-com>
            </div>
            <div class="course_right">
                <video-com></video-com>
            </div>
        </div>
        <div>
              <!-- <Editor id="tinymce"
                v-model="goodsDetail"
                :init="editorInit"></Editor> -->
        </div>
        <div>
            <el-button @click="saveAll" v-if="$route.query.status" type="success" >确定编辑</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import courseBase from './courseBase.vue'
import dirCom from './dirCom.vue'
import videoCom from './videoCom.vue'
// import tinymce from 'tinymce/tinymce'
// import 'tinymce/themes/silver/theme'
import '../../../public/tinymce/skins/content/default/content.css'
// import Editor from '@tinymce/tinymce-vue'
import $bus from '../../utils/bus'
export default defineComponent({
    data(){
        return{
             goodsDetail:"",
             editorInit: {
                language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
                language: 'zh_CN',//语言
                skin_url: '/tinymce/skins/ui/oxide',// skin路径
                height: 400,//编辑器高度
                branding: false,//是否禁用“Powered by TinyMCE”
                menubar: true,//顶部菜单栏显示
              }
        }
    },
    methods:{
        saveAll(){
            // 让子组件调用接口
            $bus.emit("saveall")
        }
    },
    components:{
      courseBase,
      dirCom,
    //   Editor,
      videoCom,
      
    }
})
</script>
<style lang="less" scoped>
        .course_info{
            width: 100%;
            display: flex;
            justify-content: space-around;
            height: 400px;
            position: relative;
            .info_cover{
                position: absolute;
                width: 100%;
                height: 400px;
                background: rgba(255, 0, 0, 0.5);
                top:0;
                 left: 0;
                 z-index: 44;
            }
            div{
                width: 45%;
                height:400px;
                background: black;
            }
        }
</style>